import React, { Component, Suspense } from 'react'
import { NavLink, withRouter } from 'react-router-dom'
import RouterView from '../router/router'
import rules from '../router/rules'
import { Spin } from 'antd';
import 'antd/lib/spin/style/index.css'


//+++++++++
import { cartlist, getnum } from '../request/cart_request'

class layout extends Component {

    //++++++++++++==
    state = {
        cart_list: []
    }
    UNSAFE_componentWillMount() {
        // console.log(this.props);
        this.getcartlist()
    }
    //拿到数据
    getcartlist() {
        // console.log(cartlist());
        cartlist().then(res => {
            if (res) {
                this.setState({ cart_list: res })
            } else {
                this.setState({ cart_list: [] })
            }

        })
    }
    //数量
    getnum() {

        return getnum(this.state.cart_list)
    }
    //++++++++++++++
    render() {
        //++++++++++
        const { cart_list } = this.state
        //+++++++++++
        return (
            <>
                <Suspense fallback={<div style={{ textAlign: 'center' }}><Spin /></div>}>
                    <RouterView routes={rules} getcartlist={cart_list} getcartlist1={this.getcartlist.bind(this)}></RouterView>
                </Suspense>
                {
                    this.props.location.pathname != '/goodsdetail' ? <div className="tabbar">
                        <NavLink activeClassName="router-link-active" className="icon icon-home" to="/home">
                            商城
                        </NavLink>
                        <NavLink activeClassName="router-link-active" className="icon icon-cate" to="/cate">
                            分类
                        </NavLink>
                        <NavLink activeClassName="router-link-active" className="icon icon-cart" to="/cart">
                        {
                                getnum(cart_list) !== 0?<span className="badge">
                                    {getnum(cart_list)}
                                </span>:""
                            }
                            购物车
                        </NavLink>
                        <NavLink activeClassName="router-link-active" className="icon icon-user" to="/uncenter">
                            我的
                        </NavLink>
                    </div> : ''
                }
            </>
        )
    }
}
export default withRouter(layout)